<script setup>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import {ref, reactive} from "vue";
import {reqSeckill} from "../api/home.js";
import {ElMessage} from 'element-plus'

// 定义三个变量
const fullscreenLoading = ref(false)  // 页面中的转圈，秒杀成功 转圈结束


// ##############同步秒杀##############
// async function handleSeckill() {
//   fullscreenLoading.value = true
//   let res = await reqSeckill('99')
//   fullscreenLoading.value = false
//   ElMessage({
//     type: 'success',
//     message: res.msg,
//   })
//
// }


// ##############异步秒杀##############
import {reqGetSeckillResult} from "../api/home.js";

async function handleSeckill() {
  fullscreenLoading.value = true
  let res = await reqSeckill('99')
  let task_id = res.task_id  // 异步任务id号

  // 启动定时器，执行查询结果
  let t = null  // 定时器
  t = setInterval(async function () {
    let res1 = await reqGetSeckillResult(task_id)
    if (res1.success == '1') {
      // 转圈框不显示
      fullscreenLoading.value = false
      clearInterval(t)
      t = null
      ElMessage({
        type: 'success',
        message: res1.msg
      })
    } else if (res1.success == '0') {
      // 转圈框不显示
      fullscreenLoading.value = false
      // 停止定时任务
      clearInterval(t)
      t = null
      ElMessage({
        type: 'success',
        message: res1.msg
      })
    } else {
      // ElMessage({
      //   type: 'error',
      //   message: res1.msg
      // })
      console.log('继续排队')
    }
  }, 1000)
}


</script>

<template>
  <div>
    <Header></Header>
    <div style="padding: 50px;margin-left: 100px">
      <h1>Go语言课程</h1>
      <img src="http://photo.liuqingzheng.top/2023%2002%2022%2021%2057%2011%20/image-20230222215707795.png"
           height="300px"
           width="300px">
      <br>
      <el-button type="danger" @click="handleSeckill" v-loading.fullscreen.lock="fullscreenLoading">秒杀课程</el-button>
    </div>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <Footer></Footer>

  </div>
</template>

<style scoped>

</style>